<template>
	<view class="fairy-container" :style="'min-height: ' + viewHeight + 'px;'">
		<view class="fairy-name">{{ detail.name }}</view>
		<u-gap height="30"></u-gap>
		<view class="fairy-time">{{ detail.createTime }}</view>
		<view class="fairy-content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
		<u-gap height="40"></u-gap>
	</view>
</template>

<script>
import { getFairyDetail } from '@/api/fairy'
export default {
	data() {
		return {
			viewHeight: 500,
			id: 0,
			detail: []
		}
	},
	methods: {
		fairyDetail() {
			getFairyDetail({ id: this.id }).then(res => {
				console.log(res);
				if (res.createTime) {
					res.createTime = res.createTime.replace('T', ' ');
				}
				if (res.content) {
					res.content = res.content.replace(/<\/p>/gi, '</p><div style="border-bottom: 1px dashed rgba(0,0,0,0.3); margin: 10px 0;"></div>');
				}
				this.detail = res;
			})
		}
	},
	onLoad(options) {
		// options 中包含了从调用页面传递过来的所有参数
		console.log('接收到的参数：', options);
		this.id = options.id;
		uni.setNavigationBarTitle({
			title: options.name
		});

		let that = this;
		uni.getSystemInfo({
			success(res) {
				that.viewHeight = res.windowHeight;
			}
		})
	},
	mounted() {
		this.fairyDetail();
	}
}
</script>

<style>
.fairy-container {
	background-color: blanchedalmond;
}

.fairy-name {
	padding-top: 40rpx;
	text-align: center;
}

.fairy-time {
	text-align: right;
	padding-right: 20rpx;
}

.fairy-content {
	text-indent: 2em;
	line-height: 1.5em;
	padding: 10px;
}
</style>
